<template>
    <div class="store-home">
        <search-bar></search-bar>
        <scroll :top="scrollTo" @onScroll="onScroll" ref="scroll">
            <slot>
                <div>a</div>
                <div>a</div>
                <div>a</div>
                <div>a</div>
                <div>a</div>
                <div>a</div>
                <div>a</div>
                <div>a</div>
                <div>a</div>
                <div>a</div>
                <div>a</div>
                <div>a</div>
                <div>a</div>
                <div>a</div>
                <div>a</div>
                <div>a</div>
                <div>a</div>
                <div>a</div>
                <div>a</div>
                <div>a</div>
                <div>a</div>
            </slot>
        </scroll>
    </div>
</template>

<script>
  import SearchBar from '../../components/home/SearchBar'
  import Scroll from '../../components/common/Scroll'
  import { storehomeMixin } from '../../utils/mixin'

  export default {
    mixins: [storehomeMixin],
    name: 'StoreHome',
    data () {
      return {
        scrollTo: 94
      }
    },
    components: { Scroll, SearchBar },
    methods: {
      onScroll (offsetY) {
        this.setOffsetY(offsetY)
        if (offsetY > 0) {
          this.scrollTo = 52
        } else {
          this.scrollTo = 94
        }
        this.$refs.scroll.refresh()
      }
    }
  }
</script>

<style scoped lang="scss" rel="stylesheet/scss">
    @import "../../assets/styles/global";

    .store-home {
        width: 100%;
        height: 100%;
    }

</style>
